<template>
	<view class="classification">
		<cu-custom :isBack="false" textWeight='600' textSize='16' fhColor="#000" textColor="#333">
		</cu-custom>
		<view class="search" :style="[{height:CustomBar + 'px',paddingTop:StatusBar+'px'}]">
			<view class="seach">
				<view class="icon">
					<img :src="imgUrl+'search.png'" alt="">
				</view>
				<view class="line"></view>
				<view class="seached" @click="search">
					<input class="uni-input" placeholder="搜索" disabled="false" />
				</view>
				<!-- <view class="btn" @click="search">搜索</view> -->
			</view>
		</view>
		<view class="content">
			<scroll-view class="scrollLeft" scroll-y="true" @scrolltolower="parentScroll"
				:style="{height:heighta-CustomBar+'px'}">
				<!-- <view class="list active">拓展盒</view> -->
				<view class="list" :class="i.id===parent?'active':''" v-for="(i,index) in parentList" :key="index"
					@click="parentClick(i.id,index)">{{i.categoryName}}</view>
			</scroll-view>
			<scroll-view class="scrollRight" scroll-y="true" @scrolltolower="sonScroll"
				:style="{height:heighta-CustomBar+'px'}">
				<image class="top" :src="topImg" mode="widthFix"></image>
				<view class="second" v-for="(i,index) in sonList " :key="index">
					<view class="title">
						<image class="left" :src="imgURL+'left.png'" mode=""></image>
						<text class="topText">{{i.categoryName}}</text>
						<image class="right" :src="imgURL+'right.png'" mode=""></image>
					</view>
					<view class="Fully">
						<view class="item" v-for="(item,itemindex) in i.goodsLabelVos" :key="itemindex"
							@click="toExpand(item,index)">
							<image class="img" :src="item.categoryImgUrl" mode=""></image>
							<text class="text">{{item.categoryName}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				imgURL: this.$http.imgUrl + '/static/classification/',
				imgUrl: this.$http.imgUrl + '/static/',
				heighta: '',

				// 父级接口数据
				parent: '',
				parentList: '',
				// 子级接口数据
				son: {
					total: '',
					pageNumber: 1
				},
				sonList: '',
				topImg: ''
			};
		},
		mounted() {
			this.heighta = uni.getSystemInfoSync().windowHeight
			this.getData()
		},
		methods: {
			// 获取一级数据分类
			async getData() {
				const url = this.api.classify.firstLabel
				const res = await this.$http.get(url, {})
				this.parentList = res.data.data
				this.parent = res.data.data[0].id
				// console.log(res, 'getdata');
				this.topImg = res.data.data[0].topImg
				this.getSonData()
			},

			// 获取二三级数据分类
			async getSonData() {
				// console.log(this.parent);
				const url = this.api.classify.secondThirdLabel
				try {
					const {
						data
					} = await this.$http.get(url, {
						parentId: this.parent
					})
					this.sonList = data.data
					// // console.log(data.data,'getSonData');
					// if (data.data[0].topImg) {
					// 	this.sonList.topImg = data.data[0].topImg
					// } else {
					// 	this.sonList.topImg = ''
					// }
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}

			},
			// 点击一级分类切换
			parentClick(id, index) {
				this.parent = id
				this.getSonData()
				this.topImg = this.parentList[index].topImg
			},
			// 左边父级scroll触底
			parentScroll() {
				return
				if (this.parentList.length === this.parent.total && this.parentList.length === 0) return
				this.parent.pageNumber++
				this.getData()
			},
			// 右边二三级Scroll触底
			sonScroll() {
				return
				if (this.sonList.length === this.son.total) return
				this.son.pageNumber++
				this.getSonData()
			},
			// 点击搜索框
			search() {
				uni.navigateTo({
					url: '/pagesA/HomePage/Search'
				})
			},
			// 去拓展盒
			toExpand(item, index) {
				uni.navigateTo({
					url: '/pagesA/Expand/index?id=' + item.id + '&parenId=' + this.parent + '&index=' + index
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.classification {

		.search {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99999;
			width: 100%;
			padding-left: 24rpx;
			background: url(https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/classification/topbac.png) no-repeat;
			background-size: 100%;
			box-shadow: 0rpx 15rpx 15rpx 0rpx rgba(153, 153, 153, 0.12);

			.seach {
				margin-top: 4rpx;
				width: 514rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				background: #FFFFFF;
				position: relative;

				.icon {
					margin-top: 2px;
					margin-left: 16rpx;

					img {
						width: 44rpx;
						height: 44rpx;
					}
				}

				.line {
					width: 2rpx;
					height: 40rpx;
					background: rgba(153, 153, 153, 0.2);
					border-radius: 2rpx;
					margin-left: 16rpx;
				}

				.seached {
					margin-left: 14rpx;
					height: 48rpx;
					width: 480rpx;

					input {
						width: 470rpx;
						height: 48rpx;
						caret-color: #4D8BFF;

						::placeholder {
							/* placeholder 的样式 */
							font-size: 28rpx;
						}
					}
				}

				.btn {
					position: absolute;
					right: 8rpx;
					width: 120rpx;
					height: 56rpx;
					background: #4D8BFF;
					border-radius: 28rpx;
					text-align: center;
					line-height: 56rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}

		.content {
			// margin-top: 10rpx;
			width: 100%;
			display: flex;

			.scrollLeft {
				width: 184rpx;
				padding-bottom: calc(120rpx + env(safe-area-inset-bottom) / 2);
				.list {
					width: 100%;
					height: 104rpx;
					background: #f3f3f3;
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
					text-align: center;
					line-height: 104rpx;

					&.active {
						background: #FFFFFF;
						font-size: 24rpx;
						font-weight: 600;
						color: #4D8BFF;
					}
				}
			}

			.scrollRight {
				flex: 1;
				background: #FFFFFF;
				text-align: center;
				padding-bottom: calc(120rpx + env(safe-area-inset-bottom) / 2);
				.top {
					width: 518rpx;
					height: 184rpx;
					margin-top: 32rpx;
					border-radius: 16rpx;
					// background-color: #4D8BFF;
				}

				.second {
					margin: 40rpx auto 0;
					width: 518rpx;

					// background-color: #4D8BFF;
					.title {
						display: flex;
						align-items: center;
						height: 24rpx;
						justify-content: center;

						.topText {
							font-size: 24rpx;
							font-weight: 400;
							color: #333333;
							margin: 0 16rpx;
						}

						.left,
						.right {
							width: 40rpx;
							height: 12rpx;
						}
					}

					.Fully {
						margin-top: 32rpx;
						width: 518rpx;
						margin: 40rpx auto 0;
						display: flex;
						// justify-content: space-around;
						flex-wrap: wrap;

						.item {
							width: 33.333333%;
							height: 120rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 40rpx;

							.img {
								height: 80rpx;
								width: 80rpx;
							}

							.text {
								width: 144rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								font-size: 24rpx;
								font-weight: 400;
								color: #999999;
							}
						}
					}
				}
			}
		}
	}
</style>